<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>BeginCode后台管理系统-关键字管理</title>
    <link rel="stylesheet" href="${rc.contextPath}/layui/css/layui.css" media="all">
    <script src="${rc.contextPath}/layui/layui.all.js"></script>
    <script src="${rc.contextPath}/js/jquery.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<#include "common/top.ftl">
<#include "common/left.ftl">
    <div class="layui-body">

        <div class="layui-form" style="padding-top: 30px">

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">关键字名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="keyWord" id="keyWord" lay-verify="keyWord"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">关键字状态</label>
                    <div class="layui-input-block">
                        <select name="keyWordFlag" id="keyWordFlag" lay-filter="keyWordFlag">
                            <option value="EFFECT" selected="">有效</option>
                            <option value="UNEFFECT">无效</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" id="query" lay-filter="keywordQuery">查询</button>
                        <button class="layui-btn" id="add" class="layui-btn">新增</button>
                    </div>
                </div>
            </div>
        </div>

        <table id="keywordList" lay-filter="opt"></table>
    </div>
<#include "common/foot.ftl">
</div>
</body>
</html>

<div id="layer-keyword-form" style="display:none;">
    <div class="layui-form" style="padding-top: 30px">
        <div class="layui-inline">
            <label class="layui-form-label">关键字</label>
            <div class="layui-input-block">
                <input type="text" name="keyWordName" id="keyWordName" class="layui-input"/>
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-block">
                <button class="layui-btn" id="save" class="layui-btn">新增</button>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="optTools">
    <a class="layui-btn layui-btn-xs" lay-event="pass">生效</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="failed">失效</a>
</script>

<script src="${rc.contextPath}/layui/layui.all.js" charset="utf-8"></script>
<script>
    layui.use(['table', 'form', 'layer'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var jquery = layui.$;

        //渲染
        table.render({
            id: 'keywordReload'
            , elem: '#keywordList'
            , height: 'full-200'
            , url: '${rc.contextPath}/admin/keyWords/queryKeyWords'
            , cellMinWidth: 80
            , page: true
            , request: {
                pageName: 'pageNo' //页码的参数名称，默认：page
                , limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            , where: {
                keyWordFlag: jquery("#keyWordFlag").val(),
                keyWord: jquery("#keyWord").val()
            }
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: 'ID', fixed: 'left', unresize: true}
                , {field: 'keyWord', title: '关键字'}
                , {field: "flag", title: '状态'}
                , {fixed: 'right', title: '操作', toolbar: '#optTools'}
            ]]

        });

        //监听工具条
        table.on('tool(opt)', function (obj) {
            var data = obj.data;
            var url;
            if (obj.event === 'pass') {
                url = "${rc.contextPath}/admin/keyWords/checkEffect";
            } else if (obj.event === 'failed') {
                url = "${rc.contextPath}/admin/keyWords/checkUnEffect";
            } else {
                layer.msg('非法操作', {
                    icon: 2,
                    time: 1000 //2秒关闭（如果不配置，默认是3秒）
                });
            }
            jquery.post(
                    url
                    , {"keyWordId": data.id}
                    , function (result) {
                        if (result.success && result.data) {
                            layer.msg('操作成功', {
                                icon: 1,
                                time: 1000 //2秒关闭（如果不配置，默认是3秒）
                            });
                        }
                        if (result.success) {
                            reloadTable();
                        }
                    }
            );
        });

        jquery('#query').on('click', function () {
            reloadTable();
        });

        function reloadTable() {
            table.reload('keywordReload', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                , request: {
                    pageName: 'pageNo' //页码的参数名称，默认：page
                    , limitName: 'pageSize' //每页数据量的参数名，默认：limit
                }
                , where: {
                    keyWordFlag: jquery("#keyWordFlag").val(),
                    keyWord: jquery("#keyWord").val()
                }
            });
        }


        jquery('#add').on('click', function () {
            openForm();

        });
        jquery('#save').on('click', function () {
            jquery.post(
                    "${rc.contextPath}/admin/keyWords/add"
                    , {"keyWord": jquery('#keyWordName').val()}
                    , function (result) {
                        if (result.success && result.data) {
                            layer.msg('操作成功', {
                                icon: 1,
                                time: 1000 //2秒关闭（如果不配置，默认是3秒）
                            });

                        } else {
                            layer.msg('操作失败', {
                                icon: 1,
                                time: 1000 //2秒关闭（如果不配置，默认是3秒）
                            });
                        }
                        reloadTable();
                    }
            );

        });


        function openForm() {
            layer.open({
                area: ['500px', '200px']
                , type: 1
                , title: '新增关键字'
                , content: jquery('#layer-keyword-form')
                , anim: 5
            });
        }
    });
</script>
